<template>
  <div class="box">
    <el-container>
      <el-header class="header">会员登录</el-header>
      <el-main>
        <el-form :model="userinfo" ref="formLogin" label-width="80px">
          <el-form-item class="zh"
            label="账号"
            prop="username"
            :rules="[
              { required: true, message: '账号不能为空' },
            ]"
          >
            <el-input placeholder="账号" v-model="userinfo.username"></el-input>
          </el-form-item>
          <el-form-item class="mm" label="密码" prop="password" :rules="[{ required: true, message: '密码不能为空' }]">
            <el-input v-model="userinfo.password" placeholder="密码" :show-password="true"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="dologin('formLogin')" class="go" style="">登录</el-button>
          </el-form-item>
          <div class="foot">
            <ul>忘记密码</ul>
            <ul @click="goRegister">立即注册</ul>
          </div>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>
 <script>
import Vue from "vue";
Vue.prototype.$message = Message;
import {
  Input,
  Button,
  Form,
  FormItem,
  Container,
  Header,
  Main,
  Message,
} from "element-ui";
Vue.use(Input);
Vue.use(Button);
Vue.use(Form);
Vue.use(FormItem);
Vue.use(Container);
Vue.use(Header);
Vue.use(Main);
Vue.use(Message);
export default {
  components: {
    Input,
    Button,
    FormItem,
    Form,
    Container,
    Header,
    Main,
    Message,
  },
  data() {
    return {
      userinfo: {
        username: "",
        password: "",
      },
    };
  },
  mounted() {},
  methods: {
    dologin(formName) {
      this.$refs[formName].validate((valid) => {
        if (!valid) {
          this.$message.error("请输入账号密码");
          return;
        }
        this.$axios.post("http://rap2.taobao.org:38080/app/mock/266947/users", this.userinfo).then(
          (res) => {
            console.log(res)
            this.$store.dispatch("setToken", res.data);
            this.$router.push({ path:`/me`,query:{username:this.userinfo.username} });
          },
          (err) => {
            this.$message.error("账号密码错误");
          }
        );
      });
    },
    goRegister(){
      this.$router.push('register')
    }
  },
};
</script>
<style lang="scss" scoped>
.zh{
  display: flex;
  align-items: center;
  justify-content: center;
}
.mm{
  display: flex;
  align-items: center;
  justify-content: center;
}
 .header{
    display: flex;
    background:red;
    align-items: center;
    justify-content: center;
  }
  .go{
    width: 25rem;
    height: 3.8rem;
    margin-top: 3.8rem
  }
  .foot{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2rem;
  }
</style>

